在我本來的規劃裡，有關 Blogging 的 API 是要嘗試的其中一個分類。經過一些嘗試之後，決定來用用 Tumblr API。

首先先註冊一個 App。要注意的是，Default callback URL 要填上 App 的網址，才會讓 Tumblr 把你的網址放進白名單裡，開 Access-Control-Allow-Origin 。

然後回來繼續讀文件。
在此文件裡面，大括弧 {} 裡面的都是必要的參數，[] 裡則是可選的參數。

Tumblr API 都以 api.tumblr.com 起頭，後面根據需求不同接上不同的 endpoint。
在要呼叫特定 blog 的資料時，request URL 需要放入一個 blog-identifier。在大部分的情況下，這個 blog-identifier 都是 username.tumblr.com，但在對方有使用客製域名時，blog-identifier 就是整個域名 www.username.com 。

Tumblr API 根據不同的 API Call 有不同的授權，分別是

• None : 不需要授權
• API Key : 使用你的 OAuth Consumer Key 作為 API Key
• OAuth : 需要其他用戶授權給你

Tumblr 的文件寫得相當詳盡，每個不同的 endpoint 都會寫上 Method ，包括 request URL、HTTP method 跟 authorization 方法。

那麼，現在來實作。我原本並沒有寫部落格的習慣，所以我的 Tumblr 帳號上沒什麼東西。
那這樣要來做什麼好呢？我突然想起 http://www.pusheen.com/ 是個 Tumblr 帳號，所以我決定要把他部落格裡面的 post 都抓出來做一個轉發/按讚排序。

抓 Blog Post 只需要 API Key 就行，所以我們的 Request API 如下：

'GET', "https://api.tumblr.com/v2/blog/{blog-identifier}/posts?api_key={API KEY}"

這邊我們的 blog-identifier 就是 www.pusheen.com 。

還有有一些可選的參數比如

• type ：選擇特定的 post type，video、quote、photo、text 等
• tag : 選取特定標籤的 post
• offset ： 會從哪篇文開始傳。預設是0 也就是第一篇

由於之前抓到 Response 然後把裡面東西插進 HTML 的事情已經做過很多次了，這次不再贅述。
程式碼如下：

// HTML
<div id="container"></div>

// CSS
#container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  text-align:center;
  justify-content:center;
}
#container div{
  margin:10px;
}

img{
    max-height:250px;
}

// JS
var apiKey = "71MMwd3Pe6fzZNk67UJKJ6mav2RzHHIKQxrMwHWtxaVitGXTrN";
var url =
  "https://api.tumblr.com/v2/blog/www.pusheen.com/posts?api_key=" +
  apiKey +
  "&type=photo";

var container = document.querySelector("#container");

function insertPost(url, img, count) {
  var postBox = document.createElement("div");
  var postUrl = document.createElement("a");
  var postImg = document.createElement("img");
  var postText = document.createElement("p");

  postUrl.href = url;
  postImg.src = img;
  postText.innerHTML = count;

  container.appendChild(postBox);
  postBox.appendChild(postUrl);
  postUrl.appendChild(postImg);
  postBox.appendChild(postText);
}

function makeRequest() {
  xhr = new XMLHttpRequest();

  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    var data = response.response.posts;

    data
      .sort(function(post_a, post_b) {
        return post_b.note_count - post_a.note_count;
      })
      .map(function(post) {
        insertPost(
          post.post_url,
          post.photos[0].alt_sizes[post.photos[0].alt_sizes.length - 3].url,
          post.note_count
        );
      });
  };
  xhr.open("GET", url, true);
  xhr.send();
}

makeRequest();

不過，由於每次 API Request 最多只能抓出 20 篇文，所以必須要 loop 幾次才能把全部的文抓出來。
把全部文章 loop 出來的部分，就不在文章裡寫出來了，可以到 Codepen 去看完整版。